<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
      
   	<div>
   		<div class="wizard-steps">
			<div class="completed-step"><a href="#"><span>1</span> Vehicle Info</a></div>
			<div class="active-step"><a href="#"><span>2</span> Vehicle Options</a></div>
			<div><a href="#"><span>3</span> Upload Images</a></div>			
		</div>
        <h:panelGrid width="100%">
   			<rich:dataGrid columns="4" elements="12" value="#{invCtrl.allFeatureGroups}" var="group" style="width: 100%;">
				<h:panelGrid id="OptionsGrid" width="100%" headerClass="subHeader nowrap" columnClasses="leftAlign padding-top">
		   			<f:facet name="header">
		                <h:panelGroup> 
		                	<h:selectBooleanCheckbox value="#{group.selected}" styleClass="fleft">
		                		<f:ajax event="change" listener="#{invCtrl.selectGroup(group.featureGroupId)}" render="OptionsGrid"/>
		                	</h:selectBooleanCheckbox> 
		                	<h:outputText value="#{group.name}"/> 
		                </h:panelGroup>
		            </f:facet>	
		            <h:selectManyCheckbox value="#{invCtrl.car.selectedFeatures}" converter="entityConverter" layout="pageDirection">
		            	<f:selectItems value="#{group.features}" var="feat" itemLabel="#{feat.featureValue}" itemValue="#{feat}" />
		            	<f:param name="entityName" value="Feature"/>
		            </h:selectManyCheckbox>	   				
			 	</h:panelGrid>			 	   		    			
    		</rich:dataGrid>		    			    	
    	</h:panelGrid>
	    <div class="navPanel">
	    	<a4j:commandButton value="&lt;&lt;Previous" styleClass="button1 alignright" immediate="true">
	            <rich:toggleControl targetItem="@prev" event="click" />
	        </a4j:commandButton>
	        <a4j:commandButton styleClass="fright button1" value="Next &gt;&gt;">
	            <rich:toggleControl targetItem="@next" event="click"/>
	        </a4j:commandButton>	        
	    </div>
    </div>
</ui:composition>